<template>
  <ConfigProvider>
    <div
      class="screen-container pointer-events-none absolute bottom-0 left-0 right-0 top-0 flex flex-col items-center overflow-hidden px-[18px] pb-[18px] text-[14px] text-[#fff]"
      :style="pageStyle"
    >
      <Header
        v-model:is-expand="isExpand"
        @vue:updated="loaded = true"
      ></Header>
      <component
        v-if="loaded"
        :is="active === 0 ? Home : active === 1 ? Scene2D : Scene3D"
        :isExpand="isExpand"
      ></component>
    </div>
  </ConfigProvider>
</template>

<script setup lang="tsx">
import { CSSProperties, computed, ref } from 'vue';
import { ConfigProvider } from 'ant-design-vue';
import { useRoute } from 'vue-router';
import Home from './Home.vue';
import Scene2D from './Scene2D.vue';
import Scene3D from './Scene3D.vue';
import Header from './components/Header.vue';

const route = useRoute();
const loaded = ref(false);

const active = computed(() => {
  return +route.query.active || 0;
});
const isExpand = ref(false);

const pageStyle = computed<CSSProperties>(() => {
  if (route.query.active === '2') {
    return {
      background: `url('/static/screen/screen-background.png') no-repeat`,
      backgroundSize: '100% 100%',
    };
  }

  return {
    backgroundImage: `radial-gradient(
    circle,
    transparent 0,
    transparent 40%,
    rgba(0, 0, 0, 0.9) 70%
  )`,
  };
});
</script>

<style lang="scss">
.screen-container {
}
.screen-table {
  .ant-table-thead {
    background: linear-gradient(
      90deg,
      rgba(49, 131, 255, 0) 0%,
      rgba(49, 131, 255, 0.5) 50%,
      rgba(49, 131, 255, 0) 100%
    );
    border-radius: 0px 0px 0px 0px;
    border: 1px solid;
    border-image: linear-gradient(
        270deg,
        rgba(255, 255, 255, 0),
        rgba(255, 255, 255, 0.34),
        rgba(255, 255, 255, 0)
      )
      1 1;
    .ant-table-cell {
      font-size: 12px;
      padding: 8px;
      background: transparent;
      &::before {
        background-color: transparent !important;
      }
    }
    .ant-table-cell.ant-table-cell-scrollbar:not([rowspan]) {
      box-shadow: none !important;
    }
  }
  .ant-table-row:not(.table-row) {
    &:hover {
      background: none !important;
      transition: none !important;
    }
  }
  .ant-table-cell-row-hover {
    background: none !important;
    transition: none !important;
  }
  .ant-table-tbody > tr > td {
    padding: 8px 8px;
    font-size: 12px;
  }

  .table-row {
    background: linear-gradient(
      90deg,
      rgba(49, 131, 255, 0) 0%,
      rgba(49, 131, 255, 0.5) 23%,
      rgba(49, 131, 255, 0) 100%
    );
  }
}
</style>
